<template>
    <div class="body_background" :style="GetWindowBackground">
        <div class="body_background padding-top10">
            <div class="block-box">
                <div :class="orderStatus==1?'display-block':'display-none'">
                    <div class="big-font-size main-color font-weight">待审核</div>
                    <div class="small-font-size three-color">等待审核中...</div>
                </div>
                <div class="w100" :class="orderStatus==2?'display-block':'display-none'">
                    <div class="big-font-size main-color font-weight">待支付</div>
                    <div class="small-font-size three-color">预期未支付订单将自动取消</div>
                    <div class="button-box">
                        <mt-button class="button" @click="cancelClickFun">取消订单</mt-button>
                        <mt-button class="button button-border" @click="goPayFun">立即支付</mt-button>
                    </div>
                </div>
            </div>
            <div class="address-box block-box">
                <div class="address-info main-color big-font-size">
                    <div class="white-space">配送地址：</div>
                    <div>天津市蓟县关注哪个镇冻手最是</div>
                </div>
                <div class="small-font-size three-color order-delivery-people">王先生 18555555555</div>
                <div class="delivery-warehouse main-color big-font-size">
                    <div class="big-font-size">配送方式：</div>
                    <div class="middle-font-size three-color">暂无配送方式</div>
                </div>
            </div>
            <div class="order-list block-box">
                <div class="three-color delivery-title">{{orderType==1?'总部直供':'门店自采'}}</div>
                <div class="order-content-list-box">
                    <div class="order-content-box"
                         v-for="(item,index) in goodsList"
                         :key="item.id"
                    >
                        <img :src="item.imgUrl"/>
                        <div class="order-info-box">
                            <div class="main-color big-font-size">{{item.id}}--{{item.title}}</div>
                            <div class="three-color small-font-size">订单号：254545</div>
                            <div class="second-color small-font-size">X 12 (4箱)</div>
                        </div>
                        <div class="second-color small-font-size goods-count">￥<span
                                class="big-font-size">6000</span></div>
                    </div>
                    <div :class="orderType==1?'display-block':'display-none'">
                        <div class="content-item main-color">
                            <div>打包费</div>
                            <div class="three-color">￥12</div>
                        </div>
                        <div class="content-item main-color">
                            <div>配送费：</div>
                            <div class="three-color">￥900</div>
                        </div>
                    </div>
                    <div class="content-item main-color w100" :class="orderStatus==2?'':'display-none'">
                        <div class="white-space">支付方式：</div>
                        <div class="arrow-box">
                            <div class="align-left three-color">货款支付(余额：￥5)</div>
                            <img src="../../assets/img/arrowFlag.png">
                        </div>
                    </div>
                    <div class="content-item main-color">
                        <div class="white-space">订单备注：</div>
                        <div class="arrow-box">
                            <div class="align-left three-color">订单备注</div>
                            <img src="../../assets/img/arrowFlag.png" :class="orderStatus==2?'':'display-none'">
                        </div>
                    </div>
                </div>
                <div class="order-content-div">
                    <div class="content-item main-color" :class="orderStatus==2?'display-none':''">
                        <div>订单编号：</div>
                        <div class="three-color">646466</div>
                    </div>
                    <div class="content-item main-color"
                         :class="orderType==1?'display-none':''"
                    >
                        <div>提交时间：</div>
                        <div class="three-color">2021-05-12 12:12:12</div>
                    </div>
                    <div class="w100" :class="orderType==2?'display-none':''">
                        <div class="content-item main-color">
                            <div>下单时间：</div>
                            <div class="three-color">2021-05-12 12:12:12</div>
                        </div>
                        <div class="content-item main-color" :class="orderStatus==2?'display-none':''">
                            <div>支付时间：</div>
                            <div class="three-color">2021-05-12 12:12:12</div>
                        </div>
                        <div class="content-item main-color" :class="orderStatus==2?'display-none':''">
                            <div>支付方式：</div>
                            <div class="three-color">货款支付</div>
                        </div>
                    </div>
                    <div class="main-color big-font-size order-price-box">
                        <div>共3件商品</div>
                        <div :class="orderType==2?'display-none':''">总金额：￥300</div>
                    </div>
                </div>
            </div>
            <mt-button class="button-verify background white-color"
                       :class="[orderType==2?'':'display-none',orderStatus==1?'':'display-none'] "
            >审核
            </mt-button>
        </div>
        <!--支付弹框-->
        <div class="pay-box" v-if="payHidden==true">
            <div class="pay-close" @click="closePayFun">&times;</div>
            <div class="pay-title main-color">确认支付</div>
            <div class="main-color pay-price">￥3000</div>
            <!--<div class="pay-item">-->
                <!--<div class="second-color">支付方式：</div>-->
                <!--<div class="pay-arrow-box">-->
                    <!--<div class="align-left three-color">货款支付(余额:￥5)</div>-->
                    <!--<img src="../../assets/img/arrowFlag.png" class="arrow-img">-->
                <!--</div>-->
            <!--</div>-->
            <input v-model="pay_password" type="password" class="pay-all-price" placeholder="请输入支付密码">
            <mt-button class="background pay-button" @click="truePayFun">确认支付</mt-button>
        </div>
        <!--弹框背景-->
        <div class="backdrop" :class="payHidden==true?'display-block':''"></div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';

    export default {
        name: "ShopOrderDetail",
        data() {
            return {
                pay_password:'',
                orderType: 2,//1:总部直供  2：门店自采(有审核按钮)
                orderStatus: 2,//1待审核  2：待支付
                GetWindowBackground: {
                    'min-height': ''
                },
                goodsList: [
                    {
                        id: 1,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        num: 0,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    }, {
                        id: 2,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        num: 0,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    }, {
                        id: 3,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        num: 0,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    }, {
                        id: 4,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        num: 0,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    }, {
                        id: 5,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        num: 0,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    }
                ],
                payHidden:false,//支付弹框 false:隐藏  true:显示
            }
        },
        methods: {
            cancelClickFun() {
                this.$router.push('/ShopOrderList')
                Toast('取消');
            },
            //支付
            goPayFun() {
                this.payHidden=true
                // Toast('支付');
            },
            //确认支付
            truePayFun(){
                this.payHidden=false
                let password=this.pay_password
                console.log(password)
            },
            //关闭支付弹框
            closePayFun() {
                this.payHidden = false
            },
            getBodyHeight() {
                // 获取浏览器高度，减去顶部搜索栏和导航栏的值 55 + 50（可动态获取）,再减去底部高度值60
                this.GetWindowBackground['min-height'] = window.innerHeight + 'px'
            },
        },
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
            window.addEventListener('resize', this.getBodyHeight) // 注册监听器
            this.getBodyHeight() // 页面创建时先调用一次
        },
        // 生命周期 - 销毁完成
        destroyed() {
            window.removeEventListener('resize', this.getBodyHeight)
        },
    }
</script>

<style lang="scss" scoped>
    .big-font-size {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .address-box {
        width: calc(100% - 60px);
        .address-info {
            width: 100%;
            display: flex;
            text-align: left;
        }
        .order-delivery-people {
            width: calc(100% - 79px);
            line-height: 25px;
            padding: 0px 10px 0px 79px;
            text-align: left;
        }
        .delivery-warehouse {
            width: 100%;
            text-align: left;
            display: flex;
            align-items: center;
            margin-top: 20px;
            .font {
                font-size: 14px;
            }
        }
    }

    .order-list {
        display: flex;
        flex-direction: column;
        .order-content-list-box {
            width: 100%;
            margin-bottom: 10px;
        }
        .delivery-title {
            width: 100%;
            font-size: 14px;
            text-align: left;
            margin-bottom: 8px;
        }
        .order-content-box {
            width: 100%;
            display: flex;
            padding: 10px 0;
            img {
                width: 60px;
                height: 60px;
                margin-right: 10px;
                border-radius: 1px;
            }
            .order-info-box {
                /*width: calc(100% - 80px);*/
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                text-align: left;
            }
            .goods-count {
                display: flex;
                align-items: center;
                margin-left: auto;
            }
        }
        .order-content-div {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            border-top: 1px dashed #D2D6DC;
            padding-top: 10px;
        }
        .content-item {
            width: 100%;
            min-height: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
        }
        .order-price-box {
            width: 100%;
            margin-top: 10px;
            display: flex;
            justify-content: flex-end;
            div {
                margin-left: 30px;
            }
        }
    }

    .button-verify {
        background: #05c569;
        border-radius: 10px;
        font-size: 15px;
        width: 60%;
        margin: 20px auto;
    }

    .button-box {
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
    }

    .button {
        height: 30px;
        font-size: 14px;
        background: transparent;
        border: 1px solid #fff;
        color: #b1b5d9;
    }

    .button-border {
        border: 1px solid #b1b5d9;
    }
    .arrow-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        img{
            width: 12px;
            height: 12px;
            padding-left: 3px;
            margin-top: 3px;
        }
    }


</style>